<html>
    <head>
        <title>非prop的Attribute</title>
    </head>
    <body>
        <script>
            // 六、非prop的 Attribute
                  /*
                        一个非prop的  attribute 是指传向一个组件，但是给组件没有相应prop 定义的 attribute.
                        （就是你给组件传了一个属性，但是这个属性没有在组件的props中定义）

                        因为显式定义的prop适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。
                        这也是为什么组件可以接受任意的attribute,而这些 attribute 会被添加到这个组件的根元素上。
                  */
                  /*
                        例如：
                            想象一下你通过一个Bootstrap插件使用了第三方的<bootstrap-date-input> 组件，
                        这个插件需要在其<input>上用到一个 data-date-picker 属性。我们可以将这个 attribute 添加到你的组件实例上：

                           <bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

                         然后，这个 data-date-picker= "activated" 属性就会自动添加到 <bootstrap-date-input>的根元素上。
                  */

                  // 1、替换/合并已有的 Attribute 
                          /*
                                想象一下 <bootstrap-date-input>的模板是这样的：

                                        <input type="date"   class="form-control">

                                为了给我们的起选择器插件定制一个主题，我们可能需要像这样添加一个特别的类型：

                                        <bootstrap-date-input
                                                          data-date-picker="activeated"
                                                          class="date-picker-theme-dark"
                                        >
                                        </bootstrap-date-input>

                                在这种情况下，我们定义了两个不同的class的值：
                                        .form-control ,这是组件的模板内设置好的
                                        .date-picker-theme-dark ，这是从组件的父级传入的

                                对于绝大多数 attribute 来说，从外部提供给组件的值会"替换"掉组件内部设置好的值。
                                所以 type="text" 就会替换掉 type="date" 并把它覆盖掉！ 
                                庆幸的是，class 和 style 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：
                                        form-control date-picker-theme-dark
                                
                          */

                    
                    // 2、禁用 attribute 继承
                            /*
                                 如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置  inheritAttrs:false
                            */
                                // 例如：
                                    Vue.component('my-component',{
                                        inheritAttrs:false
                                    })
                            /*
                                 这尤其适合配合实例的 $attrs 属性使用，该property包含了传递给一个组件的attribute 名和  attribute值：
                            */
                                // 例如：
                                    {
                                        required:true,
                                        placeholder:'Enter your username'
                                    }

                            /*
                                 有了 inheritAttrs:false 和 $attrs,你就可以手动决定定这些attribute会被赋予哪个元素。
                                 这在编写"基础组件"的时候是常会用到的：
                            */  
                                    Vue.component('base-input',{
                                        inheritAttrs:false,
                                        props:['label','value'],
                                        template:`
                                            <label>
                                                {{label}}
                                                <input 
                                                      v-bind:"$attrs"
                                                      v-bind:value="value"
                                                      v-on:input="$emit('input',$event.target.value)"
                                            </label>
                                        `
                                    });


        </script>
    </body>
</html>